<template>
    <div class="each_enter wrap">
        <p class="info">基本信息</p>
        <div class="each">
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="manager-o"
                        size="26"
                        color="#51D3FC"
                    />
                    <span>昵称</span>
                </div>
                <van-icon name="arrow" />
            </div>
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="shield-o"
                        size="26"
                        color="#FFCC00"
                    />
                    <span>实名认证</span>
                </div>
                <span class="each_right">已完善</span>
                <van-icon name="arrow" />
            </div>
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="wap-home-o"
                        size="26"
                        color="#1A814F"
                    />
                    <span>我的房屋</span>
                </div>
                <van-icon name="arrow" />
            </div>
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="logistics"
                        size="26"
                        color="#F57B49"
                    />
                    <span>我的车辆</span>
                </div>
                <van-icon name="arrow" />
            </div>
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="hotel-o"
                        size="26"
                        color="#FF8C00"
                    />
                    <span>手机号码</span>
                </div>
                 <span class="each_right">修改手机号</span>
                <van-icon name="arrow" />
            </div>
            <div class="enchenter">
                <div class="center_left">
                    <van-icon
                        name="records"
                        size="26"
                        color="#5F9EA0"
                    />
                    <span>修改密码</span>
                </div>
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="each_bottom">
            <p>退出登录</p>
        </div>
    </div>
</template>

<script>
export default {
  // 定义属性
  name: "Eachcenter",
  data() {
    return {};
  },
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.each_enter {
  .info {
    font-size: 18px;
    margin: 20px 0 0 20px;
  }
  .each {
    width: 100%;
    padding: 20px 10px 20px 15px;
    .enchenter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
      box-shadow: 0 5 5px #ccc;
      .each_right{
          margin-left: 120px;
          color: #666;
      }
      .center_left {
        span {
          font-size: 18px;
          margin-left: 10px;
        }
      }
    }
  }
  .each_bottom {
    p {
      color: #44a47b;
      border: 1px solid #44a47b;
      width: 180px;
      padding: 20px;
      text-align: center;
      margin: 20px auto;
    }
  }
}
</style>